<template>
  <div class="wrapper">
    <div class="wrapper_content">
      <div class="wrapper_bread">
        <router-link to="/home"
          >首页<span class="bread-icon"> > </span></router-link
        >
        <router-link to="/household"
          >家庭保洁<span class="bread-icon"> > </span></router-link
        >
        <span class="bread-current">日常保洁</span>
      </div>
      <div class="content">
        <div class="wrapper_goods">
          <div class="goods-top">
            <div class="goods-img">
              <img
                src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8wOS9mZGQ5OTM4ZmE2OWJiZTllMDcxMGFhOTQzN2EzM2JmZi05MC53ZWJw.webp"
                alt=""
              />
            </div>
            <div class="goods-desc">
              <div class="goods-name">{{ goodsName }}</div>
              <div class="goods-type">
                <label class="type-name">房屋户型</label>
                <div>
                  <el-radio-group
                    v-model="houseModel"
                    @change="selectHouseModel"
                  >
                    <el-radio-button label="一居室"></el-radio-button>
                    <el-radio-button label="两居室"></el-radio-button>
                    <el-radio-button label="三居室"></el-radio-button>
                    <el-radio-button label="三居室以上"></el-radio-button>
                  </el-radio-group>
                </div>
              </div>
              <div class="goods-type service-time">
                <label class="type-name">服务时长</label>
                <div>
                  <el-radio-group
                    v-model="serviceTime"
                    @change="selectServiceTime"
                  >
                    <el-radio-button label="2小时"></el-radio-button>
                    <el-radio-button label="3小时"></el-radio-button>
                    <el-radio-button label="4小时"></el-radio-button>
                    <el-radio-button label="4小时以上"></el-radio-button>
                  </el-radio-group>
                </div>
              </div>
              <div class="goods-price">¥{{ price }}</div>
              <div class="goods-car">
                <div @click="addCart(goodsId)" type="primary" class="add-car">
                  加入购物车
                </div>
                <div class="goods-num">
                  <el-input-number
                    v-model="num"
                    @change="handleChange"
                    :min="1"
                    :max="10"
                    label="描述文字"
                  ></el-input-number>
                </div>
              </div>
            </div>
          </div>
          <div class="goods-bottom">
            <div class="nav-btn">
              <router-link
                class="btn-item item-left"
                active-class="active"
                to="/household/detail/desc"
                >描述</router-link
              >
              <router-link
                class="btn-item"
                active-class="active"
                to="/household/detail/comment"
                >用户评论（0）</router-link
              >
            </div>
            <router-view></router-view>
          </div>
          <div class="goods-about">
            <div class="about-title">相关商品</div>
            <div class="about-content">
              <div class="item">
                <img
                  src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8wOS9hM2I2MGZhMzQyMTQwNDQxZjYzMTUzZWNiY2Q3MjdkNi0zMDB4MzAwLTkwLndlYnA_p_p100_p_3D.webp"
                  alt=""
                />
                <div class="item-name">深度大扫除</div>
                <div class="item-price">¥300.00-¥999.00</div>
              </div>
              <div class="item">
                <img
                  src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8wOS9hM2I2MGZhMzQyMTQwNDQxZjYzMTUzZWNiY2Q3MjdkNi0zMDB4MzAwLTkwLndlYnA_p_p100_p_3D.webp"
                  alt=""
                />
                <div class="item-name">深度大扫除</div>
                <div class="item-price">¥300.00-¥999.00</div>
              </div>
              <div class="item">
                <img
                  src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8wOS9hM2I2MGZhMzQyMTQwNDQxZjYzMTUzZWNiY2Q3MjdkNi0zMDB4MzAwLTkwLndlYnA_p_p100_p_3D.webp"
                  alt=""
                />
                <div class="item-name">深度大扫除</div>
                <div class="item-price">¥300.00-¥999.00</div>
              </div>
              <div class="item">
                <img
                  src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8wOS9hM2I2MGZhMzQyMTQwNDQxZjYzMTUzZWNiY2Q3MjdkNi0zMDB4MzAwLTkwLndlYnA_p_p100_p_3D.webp"
                  alt=""
                />
                <div class="item-name">深度大扫除</div>
                <div class="item-price">¥300.00-¥999.00</div>
              </div>
            </div>
          </div>
        </div>
        <div class="wrapper_right">
          <div class="wrapper_contact">
            <div class="contact-phone">
              <p class="phone-name">电话咨询：</p>
              <p class="phone-num">400-0000-0000</p>
            </div>
          </div>
          <div class="wrapper_qa">
            <div class="qa-title">常见问题</div>
            <div class="qa-content">
              <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
              </ul>
            </div>
          </div>
          <div class="wrapper_qa wrapper_order">
            <div class="qa-title">预约服务</div>
            <input type="text" name="userPhone" placeholder="电话" id="" />
            <input type="text" name="code" placeholder="验证码" id="" />
            <div class="submit">提交</div>
            <div class="tip">*短信功能需要花钱，暂不测验。</div>
          </div>
        </div>
        <!-- <div class="shopping-cart">
          <el-drawer
            title="我是标题"
            :visible.sync="drawer"
            :with-header="false"
            :size="400"
          >
            <div class="cart-header">购物车</div>
            <div class="cart-content">
              <div class="cart-item" v-for="(item, index) in cart" :key="index">
                <div class="item-left">
                  <img
                    src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8wOS9mZGQ5OTM4ZmE2OWJiZTllMDcxMGFhOTQzN2EzM2JmZi05MHg5MC05MC53ZWJw.webp"
                    alt=""
                  />
                </div>
                <div class="item-right">
                  <div class="name">{{ item.goodsName }}</div>
                  <div class="desc">
                    <p>{{ item.houseModel }}</p>
                    <p>{{ item.serviceTime }}</p>
                  </div>
                  <div class="price">
                    <span>{{ item.num }}</span
                    >×<span>¥{{ item.price }}</span>
                  </div>
                </div>
                <div class="item-delete" @click="deleteItem(index)">
                  <i class="el-icon-close"></i>
                </div>
              </div>
            </div>
            <div class="cart-bottom">
              <div class="sum-price">
                <span>小计¥{{ sumPrice.toFixed(2) }}</span>
              </div>
              <router-link to="/cart" class="cart-btn btn">
                <el-button>查看购物车</el-button>
              </router-link>
              <div class="buy-btn btn">
                <el-button type="primary">结算</el-button>
              </div>
            </div>
          </el-drawer>
        </div> -->
        <Cart ref="myCart" :drawer="drawer" @closeCart="closeCart"></Cart>
      </div>
    </div>
  </div>
</template>

<script>
import Cart from "../components/Cart";
export default {
  data() {
    return {
      drawer: false,
      houseModel: "一居室",
      serviceTime: "2小时",
      price: "70.00",
      goodsName: "日常保洁",
      goodsId: 1,
      cart: [],
      num: 1,
    };
  },
  methods: {
    // 加入购物车
    addCart(id) {
      console.log(id);
      const { houseModel, serviceTime, price, goodsName, goodsId, num } = this;
      const obj = {
        houseModel: "房屋户型：" + houseModel,
        serviceTime: "服务时长：" + serviceTime,
        price,
        goodsName,
        goodsId,
        num,
      };
      let cart = JSON.parse(localStorage.getItem("cart")) || [];
      let flag = cart.some((item) => item.goodsId === id);
      if (flag) {
        cart.forEach((item) => (item.goodsId === id ? (item.num += num) : ""));
      } else {
        cart.push(obj);
      }
      localStorage.setItem("cart", JSON.stringify(cart));
      this.drawer = true;
      this.$refs.myCart.getCartItem();
    },
    // 选择房屋户型
    selectHouseModel() {
      const { houseModel, serviceTime } = this;
      if (houseModel === "一居室") {
        switch (serviceTime) {
          case "2小时":
            this.price = "70.00";
            this.goodsId = 1;
            break;
          case "3小时":
            this.price = "90.00";
            this.goodsId = 2;
            break;
          case "4小时":
            this.price = "110.00";
            this.goodsId = 3;
            break;
          case "4小时以上":
            this.price = "130.00";
            this.goodsId = 4;
            break;
        }
      } else if (houseModel === "两居室") {
        switch (serviceTime) {
          case "2小时":
            this.price = "80.00";
            this.goodsId = 5;
            break;
          case "3小时":
            this.price = "100.00";
            this.goodsId = 6;
            break;
          case "4小时":
            this.price = "120.00";
            this.goodsId = 7;
            break;
          case "4小时以上":
            this.price = "140.00";
            this.goodsId = 8;
            break;
        }
      } else if (houseModel === "三居室") {
        switch (serviceTime) {
          case "2小时":
            this.price = "90.00";
            this.goodsId = 9;
            break;
          case "3小时":
            this.price = "110.00";
            this.goodsId = 10;

            break;
          case "4小时":
            this.price = "130.00";
            this.goodsId = 11;

            break;
          case "4小时以上":
            this.price = "150.00";
            this.goodsId = 12;

            break;
        }
      } else {
        switch (serviceTime) {
          case "2小时":
            this.price = "100.00";
            this.goodsId = 13;
            break;
          case "3小时":
            this.price = "120.00";
            this.goodsId = 14;
            break;
          case "4小时":
            this.price = "140.00";
            this.goodsId = 15;
            break;
          case "4小时以上":
            this.price = "160.00";
            this.goodsId = 16;
            break;
        }
      }
    },
    // 选择服务时长
    selectServiceTime() {
      const { houseModel, serviceTime } = this;
      if (houseModel === "一居室") {
        switch (serviceTime) {
          case "2小时":
            this.price = "70.00";
            break;
          case "3小时":
            this.price = "90.00";
            break;
          case "4小时":
            this.price = "110.00";
            break;
          case "4小时以上":
            this.price = "130.00";
            break;
        }
      } else if (houseModel === "两居室") {
        switch (serviceTime) {
          case "2小时":
            this.price = "80.00";
            break;
          case "3小时":
            this.price = "100.00";
            break;
          case "4小时":
            this.price = "120.00";
            break;
          case "4小时以上":
            this.price = "140.00";
            break;
        }
      } else if (houseModel === "三居室") {
        switch (serviceTime) {
          case "2小时":
            this.price = "90.00";
            break;
          case "3小时":
            this.price = "110.00";
            break;
          case "4小时":
            this.price = "130.00";
            break;
          case "4小时以上":
            this.price = "150.00";
            break;
        }
      } else {
        switch (serviceTime) {
          case "2小时":
            this.price = "100.00";
            break;
          case "3小时":
            this.price = "120.00";
            break;
          case "4小时":
            this.price = "140.00";
            break;
          case "4小时以上":
            this.price = "160.00";
            break;
        }
      }
    },
    // 关闭购物车
    closeCart() {
      this.drawer = false;
    },
    // 更改商品数量
    handleChange() {},
  },
  computed: {
    sumPrice() {
      const { cart } = this;
      return cart.reduce((acc, item) => Number(item.price) * item.num, 0);
    },
  },
  components: { Cart },
};
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f3f8fa;
  // height: 100%;
  &_content {
    padding-bottom: 40px;
    margin-left: 16px;
  }
  &_bread {
    color: #666;
    line-height: 60px;
    .bread-icon,
    .bread-current {
      color: #e6454a;
    }
  }
  .content {
    display: flex;
    height: 100%;
    .wrapper_goods {
      padding: 60px 20px;
      background-color: #fff;
      .goods-top {
        display: flex;
        border-bottom: 1px solid #999;
        padding-bottom: 40px;
        .goods-img {
          margin-right: 30px;
          img {
            max-width: 210px;
            max-height: 210px;
          }
        }
        .goods-desc {
          .goods-name {
            width: 100px;
            font-size: 22px;
            line-height: 40px;
            margin-bottom: 20px;
            border-bottom: 4px solid #e6454a;
          }
          .goods-type {
            display: flex;
            align-items: center;
            color: #666;
            margin-bottom: 10px;
            .type-name {
              margin-right: 10px;
            }
          }
          .goods-price {
            font-size: 24px;
            margin-top: 20px;
            color: #e6454a;
          }
          .goods-car {
            display: flex;
            margin-top: 50px;
            cursor: pointer;

            .add-car {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 160px;
              height: 40px;
              background-color: #e6454a;
              color: #fff;
              margin-right: 10px;
            }
          }
        }
      }
      .goods-bottom {
        .nav-btn {
          display: flex;
          font-size: 18px;
          .btn-item {
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            width: 120px;
            height: 40px;
            color: #333;
          }
          :hover {
            border-top: 4px solid #e6454a;
          }
          .active {
            border-top: 4px solid #e6454a;
          }
          .item-left {
            width: 80px;
          }
        }
      }
      .goods-about {
        width: 840px;
        .about-title {
          line-height: 60px;
          font-size: 18px;
        }
        .about-content {
          display: flex;
          justify-content: space-between;
          .item {
            width: 23%;
            border: 1px solid #dddddd;
            padding: 5px;
            img {
              width: 100%;
            }
            .item-name,
            .item-price {
              line-height: 30px;
              color: #666;
              font-size: 15px;
            }
            .item-price {
              font-size: 13px;
              color: #e6454a;
            }
          }
        }
      }
    }
    .wrapper_right {
      // display: flex;
      // flex-direction: column;
      margin-left: 20px;
      .wrapper_contact {
        width: 300px;
        height: 120px;
        background-color: #fff;
        padding: 20px;
        box-sizing: border-box;
        border-radius: 6px;
        .contact-phone {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100%;
          border: 3px solid #e6454a;
          .phone-name {
            color: #e6454a;
            line-height: 30px;
          }
          .phone-num {
            font-size: 20px;
            color: rgb(230, 69, 74);
          }
        }
      }
      .wrapper_qa {
        width: 300px;
        // height: 600px;
        background-color: #fff;
        margin: 15px 0;
        border-radius: 6px;
        padding: 40px 30px 50px;
        box-sizing: border-box;
        .qa-title {
          width: 80px;
          font-size: 20px;
          line-height: 40px;
          border-bottom: 4px solid #e6454a;
        }
        .qa-content {
          margin-top: 30px;
          height: 300px;
          overflow: auto;
          ul {
            li {
              line-height: 40px;
            }
          }
        }
      }
      .wrapper_order {
        padding: 40px 20px 50px;
        .qa-title {
          margin-left: 20px;
          margin-bottom: 20px;
        }
        input {
          caret-color: #333;
          width: 100%;
          border: none;
          border-bottom: 1px solid rgb(243, 248, 250);
          line-height: 40px;
        }
        .submit {
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto;
          margin-top: 20px;
          width: 100px;
          height: 40px;
          background-color: #f3f8fa;
        }
        .tip {
          text-align: center;
          margin-top: 20px;
          font-size: 10px;
          color: rgb(184, 49, 47);
        }
      }
    }
    .shopping-cart {
      position: relative;
      /deep/ .el-drawer__body {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
      }
      ::-webkit-scrollbar {
        display: none;
      }
      .cart-header {
        top: 0;
        width: 400px;
        height: 60px;
        background-color: #000;
        color: #fff;
        font-size: 22px;
        text-align: center;
        line-height: 60px;
      }
      .cart-content {
        display: flex;
        flex-direction: column;
        padding: 10px 50px;
        flex: 1 1;
        overflow: auto;
        .cart-item {
          position: relative;
          display: flex;
          padding: 20px 0;
          border-bottom: 1px solid #ddd;
          .item-right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 20px;
            font-size: 12px;
            color: #e6454a;
            .desc {
              line-height: 14px;
            }
            .price,
            .name {
              font-size: 14px;
            }
            .name {
              color: #ac1b1b;
            }
          }
          .item-delete {
            position: absolute;
            right: 0;
            top: 20px;
            color: #ddd;
            cursor: pointer;
          }
        }
      }
      .cart-bottom {
        // position: fixed;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 400px;
        padding: 20px;
        height: 200px;
        // bottom: 0;
        box-sizing: border-box;
        .btn {
          width: 270px;
          height: 40px;
          margin-bottom: 10px;
          /deep/ .el-button {
            width: 100%;
            border-radius: 0;
            border: 1px solid #e6454a;
          }
        }
        .cart-btn {
          /deep/ .el-button {
            color: #e6454a;
          }
        }
        .buy-btn {
          /deep/ .el-button {
            background: #e6454a;
          }
        }
        .sum-price {
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style>